<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
      <el-card class="catalogue">
        <template #header>
          <div class="card-header">
            <span>目录</span>
          </div>
        </template>
        <el-row v-if="article.catalogue" v-html="article.catalogue"></el-row>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
      <el-card>
        <el-row class="title">
          <h1>
            {{ article.title }}
            <el-button v-if="!article.isStar" @click.prevent="toStar" circle>
              <el-icon>
                <star/>
              </el-icon>
            </el-button>
            <el-button v-if="article.isStar" type="warning" @click.prevent="cancelStar" circle>
              <el-icon>
                <star/>
              </el-icon>
            </el-button>
          </h1>

        </el-row>

        <el-row class="author">
          <el-avatar :src="article.userAvatar" :style="{'margin-right':'15px'}"/>
          <el-col :span="18">
            <el-row>
              {{ article.userName }}
            </el-row>
            <el-row>
              <small>{{ GMTToStr(article.createTime) }}</small>
            </el-row>
          </el-col>
        </el-row>
        <el-divider/>
        <el-row class="content" v-html="article.content">

        </el-row>
      </el-card>

      <el-card>
        <el-form v-model="commentVal">
          <el-form-item :style="{'width':'100%'}">
            <el-input type="textarea" v-model="commentVal" :maxlength="100"/>
          </el-form-item>
          <el-form-item :style="{'width':'100%','text-align':'right'}">
            <el-button type="primary" @click.prevent="publishComment">
              评论
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-row>
        <comment :item="parentItem"
                 @refreshComment="getComment"
                 v-for="(parentItem,parentIdx) in commentReply.list"
                 :key="parentIdx"
                 :style="{'margin-bottom':'15px'}"
        >
          <div v-for="(childItem,childIdx) in parentItem.childList" :key="childIdx" :style="{'width':'100%'}">
            <comment :item="childItem" @refreshComment="getComment">
            </comment>
          </div>
        </comment>
      </el-row>
      <el-pagination background layout="prev, pager, next"
                     :page-size="commentReply.pageSize"
                     :total="commentReply.total"
                     :current-page="commentReply.page"
                     @current-change="currentChange"
      />
    </el-col>

  </el-row>
</template>

<script>
import { defineComponent, reactive, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getArticle, star, unStar, haveStar } from '@/api/article'
import { GMTToStr } from '@/utils/date'
import { Star } from '@element-plus/icons'
import { pageComment, insertComment } from '@/api/comment'
import { ElMessage } from 'element-plus'
import Comment from './Comment'

export default defineComponent({
  name: 'Detail',
  components: {
    Comment,
    Star
  },
  setup () {
    const route = useRoute()

    const article = reactive({
      catalogue: '',
      categoryList: [],
      commentNum: 0,
      content: '',
      createTime: 0,
      description: '',
      id: route.params.id,
      startNum: 0,
      title: '',
      updateTime: 0,
      userAvatar: '',
      userId: 0,
      userName: '',
      isStar: false
    })
    const getStar = async () => {
      const reply = await haveStar(article.id)
      if (reply.data.code === 0) {
        article.isStar = reply.data.data.isStar
      }
    }
    const toStar = async () => {
      const reply = await star(article.id)
      if (reply.data.code === 0) {
        await getStar()
      }
    }
    const cancelStar = async () => {
      const reply = await unStar(article.id)
      if (reply.data.code === 0) {
        await getStar()
      }
    }

    const initArticle = async () => {
      const reply = await getArticle(article.id)
      if (reply.data.code === 0) {
        article.catalogue = reply.data.data.catalogue
        article.categoryList = reply.data.data.categoryList
        article.commentNum = reply.data.data.commentNum
        article.content = reply.data.data.content
        article.createTime = reply.data.data.createTime
        article.description = reply.data.data.description
        article.id = reply.data.data.id
        article.startNum = reply.data.data.startNum
        article.title = reply.data.data.title
        article.updateTime = reply.data.data.updateTime
        article.userAvatar = reply.data.data.userAvatar
        article.userId = reply.data.data.userId
        article.userName = reply.data.data.userName
      }
    }

    const commentVal = ref('')
    const publishComment = async () => {
      const reply = await insertComment({
        content: commentVal.value,
        parentId: 0,
        articleId: article.id
      })
      if (reply.data.code === 0) {
        ElMessage({
          message: '发布成功',
          type: 'success',
          offset: 90,
          duration: 1500
        })
        await getComment()
        return
      }
      ElMessage({
        message: reply.data.msg,
        type: 'error',
        offset: 90,
        duration: 1500
      })
    }
    const commentReply = reactive({
      list: {},
      page: 1,
      pageSize: 10,
      last: true,
      total: 0
    })
    const getComment = async () => {
      const pageCommentReply = await pageComment({
        article_id: article.id,
        page: commentReply.page - 1,
        page_size: commentReply.pageSize
      })
      if (pageCommentReply.data.code === 0) {
        commentReply.list = pageCommentReply.data.data.list
        commentReply.last = pageCommentReply.data.data.last
        commentReply.total = pageCommentReply.data.data.total
      }
    }
    const currentChange = (data) => {
      commentReply.page = data
      getComment()
    }
    onMounted(async () => {
      await initArticle()
      await getStar()
      await getComment()
    })
    return {
      article,
      GMTToStr,
      commentVal,
      commentReply,
      toStar,
      cancelStar,
      publishComment,
      getComment,
      currentChange
    }
  }
})
</script>

<style>
h1, h2, h3, h4, h5, p {
  width: 100% !important;
  word-wrap: break-word;
  word-break: break-all;
}

.content {
  padding: 15px
}

.catalogue li {
  list-style: none; /*去掉小圆点*/
  width: 100%;
  height: 100%;
}

.catalogue a {
  text-decoration: none;
  color: #999999;
}

.catalogue a:hover {
  color: #409EFF;
}

.author {
  height: 40px;
}

.title button {
  justify-content: right;
  text-align: right;
  float: right;
}
</style>
